<template>

  <div style="background-color: #fff;height: 89.8vh;">
    <el-descriptions
        title="低代码"
        direction="vertical"
        :column="4"
        border
    >
      <el-descriptions-item label="数据库类型">
        <el-select   @change="dataBaseChange" v-model="database">
          <el-option label="mysql" value="mysql" />
          <el-option label="sqlServer" value="sqlServer" />

        </el-select>
      </el-descriptions-item>
      <el-descriptions-item label="表">
        <el-select :multiple="true"
                   style="width: 100%"  placeholder="Select" v-model="choiceTable">
          <el-option
              v-for="item in tables" :label="item" :value="item" />
        </el-select>
      </el-descriptions-item>

      <el-descriptions-item label="操作" :span="2">
        <el-button @click="buildCode">生成</el-button>
      </el-descriptions-item>
      <el-descriptions-item label="提示" :span="4"
      >
        请保证您已经创建了对应的模块
      </el-descriptions-item>
    </el-descriptions>
  </div>

</template>
<script setup>
import {ref} from "vue";
import {build, getAllTable} from "../../../request/system/api.js";
import {ElMessage} from "element-plus";

const database=ref()
const tables=ref([])
const choiceTable=ref([])
const dataBaseChange=()=>{
  getAllTable(database.value).then((response)=>{
    tables.value=response.data
  })
}
const buildCode=()=>{

  build({tablesArray:choiceTable.value,database:database.value}).then(response=>{
    ElMessage.success("生成成功")
  })
}
</script>
<style scoped>

</style>